import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './Score.css'
import { Button } from 'antd-mobile'

export default function Score() {
    const navigate = useNavigate()
    const [score, setScore] = useState(255)
    const [sign, setSign] = useState(false)
    const [task, setTask] = useState([
        { title: '每日签到', score: 10, done: false },
        { title: '浏览一篇文章', score: 5, done: false },
        { title: '点赞一篇文章', score: 10, done: false },
    ])
    const data = [
        { title: '腾讯视频VIP月卡', score: 50, num: 29, img: '../TX.jpg' },
        { title: '京东E卡', score: 100, num: 10, img: '../JD.jpg' },
        { title: '爱奇艺VIP月卡', score: 50, num: 20, img: '../IQIYI.jpg' },
    ]
    return (
        <div className='score'>
            <div className='score-header'>
                <h1>我的积分</h1>
                <span onClick={() => { navigate(-1) }}>&lt;</span>
            </div>
            <div className="score-content">
                <div className="first">
                    <p><span>{score}</span>积分</p>
                    <div className="sign-in">
                        <h3>每日签到</h3>
                        <img src="../sign-in.jpg" alt="" />
                        <Button disabled={sign}
                            onClick={() => {
                                setSign(true)
                                setScore(score + 10)
                            }}>
                            {sign ? '已签到' : '签到'}
                        </Button>
                    </div>
                </div>
            </div>
            <div className="second">
                <h3>积分任务</h3>
                <div className="task">
                    {
                        task.map((item, index) => {
                            return <div key={index} className="task-item">
                                <p>{item.title}</p>
                                <span>
                                    +{item.score}积分&nbsp;&nbsp;
                                </span>
                            </div>
                        })
                    }
                </div>
            </div>
            <div className="three">
                <h3>积分兑换</h3>
                <div className="data">
                    {
                        data.map((item, index) => {
                            return <div key={index} className="data-item">
                                <img src={item.img} alt="" />
                                <h4>{item.title}</h4>
                                <p>{item.num}人已购买</p>
                            </div>
                        })
                    }
                </div>
            </div>
        </div>
    )
}
